import React, { Component } from 'react';
import './App.css';
import { Layout, Menu, Icon, Breadcrumb} from 'antd';
import { SelectParam } from 'antd/lib/menu';
import menuManager, { MenuManager } from './menu';

const { Header, Footer, Sider, Content } = Layout;
export interface IMap { 
  [index: string]: any;
}

export interface IState { 
  collapsed: boolean,
  menuMgr: IMap,
}
class App extends Component {
  constructor(props: any) { 
    super(props);
    menuManager.init(this, 'menuMgr');
  }
  state: IState = {
    collapsed: false,
    menuMgr: menuManager.toJSON(),
  }
  menuMgr: MenuManager = menuManager;
  onCollapse = (collapsed: boolean) => { 
    this.setState({ collapsed });
  }
  //一级菜单改变
  onMenuSelect = (params: SelectParam) => { 
    let menuKey = params.key;
    this.menuMgr.goto(undefined, menuKey);
  }
  //二级菜单改变
  onSideMenuSelect = (params: SelectParam) => { 
    let key = params.key;
    this.menuMgr.goto(key);
  }

  render() {
    let sideMenus = [
    ];
    let keys = Object.keys(this.state.menuMgr.sideMenus);
    for (let key of keys ) { 
      sideMenus.push(
        <Menu.Item key={key}><Icon type={this.state.menuMgr.sideMenus[key].icon}></Icon><span>{this.state.menuMgr.sideMenus[key].title}</span></Menu.Item>
      )
    }
    let menu =
      <Menu
        mode="inline"
        defaultSelectedKeys={[`${this.state.menuMgr.sideMenuKey}`]}
        onSelect={this.onSideMenuSelect}
      >
        {sideMenus}
      </Menu>
    
    return (
      <Layout>
        <Header className="header">
          <div className="logo"></div>
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['article']} style={{ lineHeight: '64px' }} onSelect={this.onMenuSelect}>
            <Menu.Item key="dash">控制台</Menu.Item>
            <Menu.Item key="website">网站设置</Menu.Item>
            <Menu.Item key="article">文章管理</Menu.Item>
            <Menu.Item key="user">用户管理</Menu.Item>
          </Menu>
        </Header>
        <Layout>
          <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse} style={{ background: '#fff' }}>
            {menu}
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>
                <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>Home</Breadcrumb.Item>
                  <Breadcrumb.Item>文章管理</Breadcrumb.Item>
                  <Breadcrumb.Item>文章列表</Breadcrumb.Item>
                </Breadcrumb>
            <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
              {this.menuMgr.component}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    );
  }
}

export default App;
